@import '../style/theme/color';
@import '../style/theme/variables';
@import '../style/mixins/index';

:host {
  display: block;
}

.devui-status {
  line-height: 20px;
  height: 20px;
  display: flex;
  align-items: center;

  &::before {
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 100%;
  }

  &.devui-status-bg-success::before {
    background: $status-green;
  }

  &.devui-status-bg-error::before {
    background: $status-red;
  }

  &.devui-status-bg-warning::before {
    background: $status-yellow;
  }

  &.devui-status-bg-waiting::before {
    background: $status-waiting;
  }

  &.devui-status-bg-running::before {
    background: $status-blue;
  }

  &.devui-status-bg-invalid::before {
    background: $gray-2;
  }

  &.devui-status-bg-initial::before {
    background: $status-initial;
  }
}
